import React, { useState, useEffect } from 'react'
import { Layout, Menu, Button, Avatar, Select } from 'antd'
import { NavLink } from 'react-router-dom'
import { menuConfig } from '@/config/menuConfig'
import _ from 'lodash'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  QuestionOutlined,
} from '@ant-design/icons'
import intl, { SelectConfig } from '@/config/intlUniversal'

const { Header, Sider, Content } = Layout
const { SubMenu } = Menu
const { Option } = Select

const rootSubmenuKeys = _.map(
  _.filter(menuConfig, (o) => o.sub),
  (item) => item.sub
)
const ComponentsIcon = {
  QuestionOutlined: <QuestionOutlined />,
}
const App = ({ setIsLogin, children }) => {
  const [openKeys, setOpenKeys] = useState([])
  const [selectedKeys, setSelectedKeys] = useState([])
  const [collapsed, setCollapsed] = useState(false)
  useEffect(() => {
    const openKey = window.sessionStorage.getItem('openKey')
    const selectedKey = window.sessionStorage.getItem('selectedKey')
    openKey && selectedKey && setOpenKeys([openKey])
    selectedKey && setSelectedKeys([selectedKey])
    !selectedKey && setSelectedKeys(['phoneCS'])
  }, [])

  const handlerClick = () => {
    setIsLogin(false)
    window.sessionStorage.clear()
  }
  const renderMenu = (data) => {
    return _.map(data, (item, key) => {
      if (item.children) {
        const menuItem = _.compact(renderMenu(item.children))
        if (menuItem.length !== 0) {
          return (
            <SubMenu
              key={item.sub}
              icon={ComponentsIcon[item.icon]}
              title={intl.get(item.title)}
            >
              {menuItem}
            </SubMenu>
          )
        }
        return null
      } else {
        const authority = window.sessionStorage.getItem('username')
        if (_.indexOf(item.authority, authority) !== -1) {
          return (
            <Menu.Item
              key={item.id}
              icon={ComponentsIcon[item.icon]}
              onClick={() => menuItemClick(item)}
            >
              <NavLink to={'/web-b/' + item.path}>{intl.get(item.name)}</NavLink>
            </Menu.Item>
          )
        }

        return null
      }
    })
  }

  const menuItemClick = (item) => {
    if (item.severalLevels === '1') {
      window.sessionStorage.removeItem('openKey')
    } else {
      window.sessionStorage.setItem('openKey', openKeys[0])
    }
    setSelectedKeys(item.id)
    window.sessionStorage.setItem('selectedKey', item.id)
  }
  const onOpenChange = (key) => {
    const latestkey = key.find((o) => openKeys.indexOf(o) === -1)
    if (rootSubmenuKeys.indexOf(latestkey) === -1) {
      setOpenKeys(key)
    } else {
      setOpenKeys(latestkey ? [latestkey] : [])
    }
    setOpenKeys(latestkey ? [latestkey] : [])
  }
  const MenuCollapsedClick = () => {
    setCollapsed(!collapsed)
  }

  const IntlUniversalChange = (value) => {
    window.sessionStorage.setItem('defaultLocal', value)
    window.location.reload()
  }

  return (
    <Layout className="layout-layout">
      <Sider className="layout-sider-app" collapsed={collapsed}>
        <div className="logo">
          <Avatar className="logo-avatar" size="large">
            HDK
          </Avatar>
        </div>
        <Menu
          mode="inline"
          onOpenChange={onOpenChange}
          defaultSelectedKeys={['phoneCS']}
          openKeys={openKeys}
          selectedKeys={selectedKeys}
        >
          {renderMenu(menuConfig)}
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-header">
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'header-menuCollApsed',
              onClick: MenuCollapsedClick,
            }
          )}

          <div className="site-layout-header-locales">
            <Select
              size="small"
              bordered={false}
              style={{ width: 100, textAlign: 'end' }}
              value={window.sessionStorage.getItem('defaultLocal') || 'zh'}
              onChange={IntlUniversalChange}
            >
              {_.map(SelectConfig, (item, key) => {
                return (
                  <Option key={key} value={item.value}>
                    {item.label}
                  </Option>
                )
              })}
            </Select>
          </div>

          <Button onClick={handlerClick}>退出登录</Button>
        </Header>
        <Content className="site-layout-content">
          <div style={{ height: '100%' }}>{children}</div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default App
